<template>
  <view
    class="te-mbanner"
    :style="{
      margin: params.margin_y * 2.2 + 'rpx ' + params.margin_x * 2.2 + 'rpx 0',
      padding: params.padding_y * 2.2 + 'rpx ' + params.padding_x * 2.2 + 'rpx',
    }"
  >
    <view
      v-for="(banner, index) in data"
      :key="index"
      :class="params.style1 == 2 ? 'banner-item' : 'banner-item2'"
      :style="{
        borderRadius: params.borderradius1 + 'px',
        backgroundColor: params.bgcolor,
      }"
    >
      <view class="banner-header">
        <text
          class="banner-title"
          :style="{
            color: params.color1,
            fontSize: params.fontsize1 * 2 + 'rpx',
          }"
          >{{ banner.name }}</text
        >
        <view class="banner-tags" v-if="banner.tips">
          <text
            class="promotion-tag"
            :style="{
              color: params.color2,
              backgroundColor: params.bgcolor1,
              fontSize: params.fontsize2 * 2 + 'rpx',
              borderRadius: params.borderradius2 + 'px',
              marginLeft: params.margin_x1 * 2.2 + 'rpx',
            }"
            >{{ banner.tips }}</text
          >
        </view>
      </view>
      <view class="banner-content">
        <!-- <block v-for="(setData, index) in banner.data" :key="index"> -->
        <!-- <block v-if="setData.temp == 'banner'"> -->
        <dp-banner :params="params" :data="banner.data"></dp-banner>
        <!-- </block> -->
        <!-- </block> -->
      </view>
    </view>
  </view>
</template>

<script>
var app = getApp();
export default {
  props: {
    params: {},
    data: {},
  },
  data() {
    return {
      bannerData: [],
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.te-mbanner {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  gap: 10px;
  background-color: #f5f5f5;

  .banner-item {
    width: calc(50% - 5px);
    flex: 1 1 calc(50% - 5px);
    max-width: calc(50% - 5px);
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  }

  .banner-item2 {
    width: 100%;
    flex: 1 1 100%;
    max-width: 100%;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  }

  .banner-swiper {
    width: 100%;
    height: 100%;
  }

  .banner-header {
    padding: 10px;
    display: flex;
  }

  .banner-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }

  .banner-tags {
    display: flex;
    gap: 5px;
  }

  .tag {
    font-size: 12px;
    padding: 2px 6px;
    background-color: #f0f9eb;
    color: #67c23a;
    border-radius: 4px;
  }

  .promotion-tag {
    font-size: 12px;
    padding: 2px 6px;
    background-color: #fff7e6;
    color: #ff9900;
    border-radius: 4px;
  }

  .banner-content {
    position: relative;
  }

  .banner-image {
    width: 100%;
    height: 100%;
  }

  .banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  }

  .banner-text {
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
  }

  .banner-subtext {
    color: #ffffff;
    font-size: 12px;
    margin-top: 4px;
  }

  .banner-count {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 10px;
  }

  .product-grid {
    display: flex;
    padding: 10px;
    gap: 10px;
  }

  .product-item {
    flex: 1;
  }

  .product-image {
    width: 100%;
    height: 100px;
    border-radius: 4px;
  }

  .product-price {
    display: flex;
    align-items: center;
    margin-top: 5px;
  }

  .price-label {
    font-size: 12px;
    color: #999;
    margin-right: 5px;
  }

  .price-value {
    font-size: 14px;
    color: #ff5722;
    font-weight: bold;
    background-color: #ffebee;
    padding: 2px 5px;
    border-radius: 4px;
  }
}
</style>
